<script>

    import NewGame from "./ContentChild/NewGame.svelte";
    import {eventEmitter} from "./eventEmitter.js";
    import {onMount} from "svelte";

    export let child_slot;
    let history_last = null;

    function newGame(){
        child_slot = NewGame
    }

    let history_table = []

    let event_emitter = eventEmitter;
    onMount(
        ()=>{
            event_emitter.on("component_update", (data)=>{
                child_slot = data
                history_table.push(data)
            })

            event_emitter.on("goto_history_last", ()=>{
                history_table = history_table.slice(0, history_table.length - 1)
                child_slot = history_table.slice(history_table.length - 1)[0] // 返回上一页
                console.log(history_table)
            })
        }

    )
</script>

<main class="main-menu">
    <h3>东方奇遇记</h3>
    <div class="menu-btn" on:click={newGame}>新建游戏</div>
    <div class="menu-btn">继续游戏</div>
    <div class="menu-btn">开发社区</div>
    <div class="menu-btn">设置</div>
</main>

<style>
    .main-menu{
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    h3{
        font-size:40px;
    }
    .menu-btn{
        padding: 1rem 2rem;
        font-size: 1.2rem;
        background-color: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 200px;
        &:hover{
            transform: scale(1.1);
        }
    }
</style>